﻿@page
@{ Layout = "_Layout"; }

<el-form v-on:submit.native.prevent :inline="true">
  <el-form-item label="关键字" style="margin-bottom: 0;">
    <el-input v-model="filterText" size="mini" placeholder="输入关键字进行过滤"></el-input>
  </el-form-item>
</el-form>

<div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" style="width: 100%;">
  <div class="hidden-columns">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="el-table__header-wrapper">
    <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 100%;">
      <colgroup>
        <col name="el-table_1_column_1">
        <col name="el-table_1_column_2" width="240">
        <col name="el-table_1_column_3" width="400">
        <col name="el-table_1_column_4" width="80">
      </colgroup>
      <thead class="has-gutter">
        <tr class="">
          <th colspan="1" rowspan="1" class="el-table_1_column_1 is-leaf">
            <div class="cell">栏目</div>
          </th>
          <th colspan="1" rowspan="1" class="el-table_1_column_2 is-leaf">
            <div class="cell">栏目页面路径</div>
          </th>
          <th colspan="1" rowspan="1" class="el-table_1_column_3 is-leaf">
            <div class="cell">内容页面路径规则</div>
          </th>
          <th colspan="1" rowspan="1" class="el-table_1_column_4 is-leaf">
            <div class="cell">操作</div>
          </th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="el-table__column-resize-proxy" style="display: none;"></div>
</div>

<el-tree
  ref="tree"
  :data="channels"
  :default-expanded-keys="[siteId]"
  node-key="value"
  check-on-click-node
  check-strictly
  highlight-current
  class="tree"
  :filter-node-method="filterNode"
>
  <div class="el-table__body-wrapper is-scrolling-none" slot-scope="{ node, data }">
    <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
      <colgroup>
        <col name="el-table_1_column_1">
        <col name="el-table_1_column_2" width="240">
        <col name="el-table_1_column_3" width="400">
        <col name="el-table_1_column_4" width="80">
      </colgroup>
      <tbody>
        <tr class="el-table__row">
          <td rowspan="1" colspan="1" class="el-table_1_column_1">
          <div class="cell">
          <el-link :underline="false" :href="getChannelUrl(data)" v-on:click.stop.native target="_blank">
            <i class="el-icon-link"></i>
          </el-link>
          {{ data.label }} ({{ data.count }})

          <!-- linkType && linkUrl -->
          <el-tooltip v-if="data.channel.linkType != 'None' || data.channel.linkUrl" effect="light" content="指定链接" placement="top">
            <i class="fa fa-external-link"></i>
          </el-tooltip>

          <el-tag size="mini" v-if="data.channel.indexName">
            {{ data.channel.indexName }}
          </el-tag>
        </div>
        </td>
        <td rowspan="1" colspan="1" class="el-table_1_column_2">
          <div class="cell">
            {{ data.filePath }}
          </div>
        </td>
        <td rowspan="1" colspan="1" class="el-table_1_column_3">
          <div class="cell">
            {{ data.contentFilePathRule }}
          </div>
        </td>
        <td rowspan="1" colspan="1" class="el-table_1_column_4">
          <div class="cell">
            <el-button type="text" size="mini" style="margin-left: 5px" v-on:click.stop="btnEditClick(data)">
              设置页面路径
            </el-button>
          </div>
        </td>
        </tr>
      </tbody>
    </table>
  </div>
</el-tree>

<el-divider></el-divider>

<el-drawer
  id="editForm"
  v-if="editForm"
  title="设置页面路径"
  :visible.sync="editPanel"
  destroy-on-close
  direction="rtl"
  size="80%">
  <div class="drawer__content">
    <el-form v-on:submit.native.prevent size="small" ref="editForm" :model="editForm" label-width="200px">
      <el-form-item label="栏目名称" prop="channelName">
        {{editForm.channelName}}
      </el-form-item>

      <el-form-item label="链接类型">
        <el-tooltip effect="light" content="设置此栏目的链接与子栏目及内容的关系" placement="right">
          <el-select v-model="editForm.linkType" placeholder="请选择链接类型" v-on:change="editForm.linkUrl = editForm.linkToChannel = '';">
            <el-option v-for="linkType in editLinkTypes" :key="linkType.value" :label="linkType.label" :value="linkType.value"></el-option>
          </el-select>
        </el-tooltip>
      </el-form-item>
      <el-form-item v-if="editForm.linkType == 'None'" label="外部链接">
        <el-input v-model="editForm.linkUrl" placeholder="设置后栏目链接将转向此地址"></el-input>
      </el-form-item>
      <el-form-item
        v-if="editForm.linkType == 'LinkToChannel' || editForm.linkType == 'LinkToContent'" 
        label="指定栏目"
        prop="channelIds"
        :rules="[{ required: true, message: '请选择栏目' }]"
        >
        <el-cascader
          v-model="editForm.channelIds"
          filterable
          :options="channels"
          :props="{ checkStrictly: true }"
          filterable 
          v-on:change="editForm.contentId = 0; editForm.contentTitle = '';"
          style="width: 100%;"
          placeholder="请选择栏目">
          <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span> ({{ data.count }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item 
        v-if="editForm.linkType == 'LinkToContent' && editForm.channelIds && editForm.channelIds.length > 0" 
        label="指定内容"
        prop="contentTitle"
        :rules="[{ required: true, message: '请选择内容' }]"
        >
        <template v-if="editForm.contentId > 0">
          <el-link type="primary" :underline="false" :href="getContentUrl()" v-html="editForm.contentTitle" target="_blank"></el-link>
          <div style="clear: both;"></div>
        </template>
        <el-button size="mini" icon="el-icon-circle-plus-outline" v-on:click="btnLinkToContentClick">
          指定内容
        </el-button>
      </el-form-item>

      <!-- <el-form-item v-if="editForm.channelId !== siteId" label="外部链接">
        <el-input v-model="editForm.linkUrl" placeholder="设置后栏目链接将转向此地址"></el-input>
      </el-form-item>
      <el-form-item v-if="editForm.channelId !== siteId" label="链接类型">
        <el-tooltip effect="light" content="设置此栏目的链接与子栏目及内容的关系" placement="right">
          <el-select v-model="editForm.linkType" placeholder="请选择链接类型">
            <el-option v-for="linkType in editLinkTypes" :key="linkType.value" :label="linkType.label" :value="linkType.value"></el-option>
          </el-select>
        </el-tooltip>
      </el-form-item> -->
      <el-form-item v-if="editForm.channelId !== siteId" label="生成页面路径">
        <el-input v-model="editForm.filePath" placeholder="在此设置栏目的生成页面地址"></el-input>
      </el-form-item>
      <el-form-item label="下级栏目页面命名规则">
        <el-input style="width: 70%" v-model="editForm.channelFilePathRule" placeholder="在此设置下级栏目页面命名规则"></el-input>
        <el-button v-on:click.prevent="btnSetClick(editForm.channelId, true, editForm.channelFilePathRule)">构造</el-button>
      </el-form-item>
      <el-form-item label="内容页面命名规则">
        <el-input style="width: 70%" v-model="editForm.contentFilePathRule" placeholder="在此设置栏目页面命名规则"></el-input>
        <el-button v-on:click.prevent="btnSetClick(editForm.channelId, false, editForm.contentFilePathRule)">构造</el-button>
      </el-form-item>

      <el-divider></el-divider>
      <div class="drawer__footer">
        <el-button type="primary" v-on:click="btnSubmitClick" size="small">确 定</el-button>
        <el-button size="small" v-on:click="btnCancelClick">取 消</el-button>
      </div>
    </el-form>
  </div>
</el-drawer>

@section Scripts{
<script src="/sitefiles/assets/js/admin/cms/settingsCreateRule.js" type="text/javascript"></script> }
